<template>
  <div class="behavior">
    <SSection :name="name">
      <SProp v-for="(item, index) in behaviorProps"
             :key="index"
             :data="item.value"
             :ext="item"
             @update:data="onUpdateData"
             :label="item.displayName||item.name">
      </SProp>
      <template v-slot:header>
        <div class="menu">
          <i class="remove iconfont icon-remove" @click="onClickRemove"></i>
        </div>
      </template>
    </SSection>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import SSection from '@/ui-kit/section/section.vue';
import SProp from '@/ui-kit/prop/prop.vue';
import pluginsStore from '../store/plugins';
import propertyStore from './store';
import { sceneAssistant } from '../scene';
import assetsStore from '../store/assets';

export default defineComponent({
  name: 'behavior',
  components: { SProp, SSection },
  props: {
    bundle: {
      type: String,
      required: true,
      default: '',
    },
  },
  setup(props, { emit }) {
    const name = computed(() => {
      const ret = pluginsStore().getBehaviorByID(props.bundle);
      return ret?.info?.name || null;
    });
    const behaviorProps = computed<sail.ComponentAttr[]>(() => {
      return propertyStore().behaviors[props.bundle];
    });
    return {
      name, behaviorProps,
      onUpdateData(val: any, data: sail.ComponentAttr) {
        sceneAssistant.setProperty(props.bundle, data.name, val);
      },
      async onClickRemove() {
        const objectID = propertyStore().originObjectID;
        await sceneAssistant.removeBehavior(objectID, props.bundle);
      },
    };
  },
});

</script>

<style scoped lang="scss">
.behavior {
  .menu {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .remove {
      cursor: pointer;
    }
  }
}
</style>